<template>
  <div class="welfare-pro-list">
    <div class="mescroll"  ref="mescroll">
      <div class="section">
        <div class="list">
          <div v-for="item in lists" class="item" @click="router({path: './welfarePro',query:{id:item.id}})">
            <img :src="item.img" alt="">
            <p class="title">{{item.title}}</p>
            <div class="cons">
              <div class="item-con">
                <p class="num">{{item.money}}</p>
                <p class="text">用户捐款(元)</p>
              </div>
              <div class="item-con">
                <p class="num">{{item.times}}</p>
                <p class="text">爱心(份)</p>
              </div>
              <div class="item-con">
                <p class="num">{{item.day}}</p>
                <p class="text">项目天数</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {welfareprolist} from '@/api/api'
  import MeScroll from 'mescroll.js'
  import 'mescroll.js/mescroll.min.css'
  export default {
    components: {
    },
    data () {
      return {
        lists:[]
      }
    },
    created () {
    },
    mounted () {
      this.mescroll = new MeScroll(this.$refs.mescroll, { 
        up: {
          callback: this.upCallback
        }
      })
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
      upCallback (page) {      
        welfareprolist(page.num, page.size).then((res) => {
          console.log(res)
          if (page.num == 1){
            this.lists = []
          }
          if(res.data == null){
            console.log(1)
            this.mescroll.endErr()
            return
          }
          this.$nextTick(() => {
            this.mescroll.endSuccess(res.data.data.list.length);
          })
          this.lists = this.lists.concat(res.data.data.list)
        }).catch((err) => {
          console.dir(err)
          this.mescroll.endErr()
        })
      }
    }
  }
</script>

<style lang="stylus" scoped>
.welfare-pro-list
  padding-top 1.5rem
  .mescroll
    position fixed
    top 0
    bottom 0
    height auto
    width 100vw
    overflow-x hidden
    padding-top 1.5rem
    box-sizing border-box
    .top-img
      float left
    .search
      float left
      width 92%
      margin-left 4%
      text-align center
      background-color #fff
      height 4.5rem
      line-height 4.5rem
      margin-top -2.25rem
      margin-bottom 1rem
      img
        display inline-block
        vertical-align middle
        width 1.6rem
      span
        display inline-block
        vertical-align middle
        font-size 1.3rem
        color #172F6D
        margin-left .5rem
  .section
    background-color #fff
    padding 0 1.5rem
    border-bottom 1px solid #E6E6E6
    .item
      margin-bottom 3rem
      img
        width 100%
        height 19.4rem
        object-fit cover
      .title
        line-height 5rem
        height 5rem
        font-size 1.7rem
        color #333
        font-weight 800
      .cons
        background-color #FAFAFA
        display flex
        border-bottom .2rem solid #172F6D
        padding 1.8rem 0
        border-radius: .6rem .6rem 0px 0px;
        .item-con
          flex 1
          text-align center
          .text
            font-size 1.2rem
            color #999
            line-height 1.2rem
            height 1.2rem
          .num
            font-size 1.7rem
            color #000
            font-weight bold
            line-height 1.7rem
            height 1.7rem
            margin-bottom 1rem
</style>
